<template>
  <div class="popup">
    <van-search
      v-model="iptValue"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @goToSearch="goToSearch"
    />
    <List
      v-else-if="blockShow == 2"
      :listArr="listArr"
      @goToSearch="goToSearch"
    />
    <Products
      v-else
      @categoryChange="categoryChange"
      @priceChange="priceChange"
      :goodsList="goodsList"
      :filterCategory="filterCategory"
    />
  </div>
</template>
 
<script>
import HistoryHot from "./HistoryHot";
import List from "./List";
import Products from "./Products";
let timer = null;
export default {
  data() {
    return {
      // 搜索框的值
      iptValue: "",
      // 区块显示(1代表HistoryHot，2代表List，3代表Products)
      blockShow: 1,
      placeholder: "请输入搜索关键词",
      // 历史数组
      historyKeywordList: [],
      // 热门数组
      hotKeywordList: ['临床执业医师','执业药师','口腔执业药师','乡村全科助理医师','中医执业药师','护士'],
      // 列表数组
      listArr: [],
      // 产品区块的数组
      goodsList: [],
      // 分类的数组
      filterCategory: [],
      // 页数
      page: 1,
      // 每页个数
      size: 20,
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // 分类选项的id
      categoryId: 0,
      // 根据什么来排序(id或price)
      sort: "id",
    };
  },
  components: {
    HistoryHot,
    List,
    Products,
  },
  methods: {
    // Products组件的分类切换
    categoryChange(id) {
      this.categoryId = id;
      this.onSearch();
    },
    // Products组件的价格切换
    priceChange(order) {
      this.order = order;
      this.sort = "price";
      this.onSearch();
    },
    // 搜索事件
    onSearch() {
      // 执行搜索
    },
    // 取消事件
    onCancel() {
      this.$router.go(-1);
    },
    // 输入事件
    onInput() {
      if(this.iptValue == '')
      {
        this.blockShow = 1
      }else{
        this.blockShow = 2
      } // 切换到List组件
      // 防抖 - 节流 - setTimeout

      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        // 当用户停下来半秒的时候我们再去做请求
        // 实时搜索
      }, 500);
    },
    // 子组件触发的搜索
    goToSearch(arg) {
      this.iptValue = arg;
      this.blockShow = 2
      // 触发搜索
      this.onSearch();
    },
  },
  created() {
    // 延迟做请求
    setTimeout(() => {
    }, 500);
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
  position: absolute;
  /* right: 0; */
  top: 0;
  width: 100%;
  height: 100%;
  background: #efefef;
  z-index: 999;
}
</style>